<template>

  <a-button size="small" type="primary" style="margin-bottom: 8px" @click="dmlOperation.addUser">
    <template #icon>
      <plus-outlined/>
    </template>
    添加
  </a-button>

  <a-table :dataSource="state.tableData"
           :columns="columns"
           :pagination="state.pagination"
           @change="handleTableChange"
           @showSizeChange="onShowSizeChange"
  >
    <!--    声明头信息用于下面的循环使用-->
    <template #headerCell="{ column }"/>
    <!--    对显示数据进行处理
    column 列信息
    record 数据信息
    -->
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'uaccount'">
        <a>{{ record.uaccount }}</a>
      </template>
      <!--      处理数据状态-->
      <template v-if="column.key === 'isDeleted'">
        <a-button size="small" type="primary" v-if="record.isDeleted === 0">可用</a-button>
        <a-button danger size="small" type="primary" v-if="record.isDeleted === 1">废除</a-button>
      </template>
      <!--      处理最后一行的操作按钮-->
      <template v-else-if="column.key === 'action'">
        <span>
          <a-button size="small" type="link" danger @click="dmlOperation.delUser(record.uaccount)">删除</a-button>
          <a-button size="small" type="link" danger @click="dmlOperation.modifyUser(record.uaccount)">修改</a-button>
          <a-button size="small" type="link" danger>明细</a-button>
        </span>
      </template>
    </template>
  </a-table>

  <!--  添加弹窗功能-->
  <a-modal ok-text="保存"
           cancel-text="关闭"
           v-model:visible="modalOptions.addVisiable"
           title="添加页面"
           @ok="dmlOperation.addOk()">
    <!--  添加页面处理功能-->
    <AddUser></AddUser>
  </a-modal>

  <!--  修改弹窗功能-->
  <a-modal ok-text="保存"
           cancel-text="关闭"
           v-model:visible="modalOptions.modifyVisiable"
           title="修改页面"
           @ok="dmlOperation.modifyOk()">
    <!--  添加页面处理功能-->
    <edit-user :data="modalOptions.data"></edit-user>
  </a-modal>

</template>
<script lang="ts" setup>
import {UserService} from "../../../api/axios/user";
import {reactive, ref, onMounted, createVNode} from "vue";
import AddUser from "./addUser.vue";
import EditUser from "./editUser.vue";
import {Modal} from "ant-design-vue";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";

/*************************类型 常量部分************************/
/**
 * 声明类型，用于模块定义时的基本参数
 */
interface modalType {
  addVisiable: boolean,
  modifyVisiable: boolean,
  data: any
}

/**
 * 数据表格显示时用到的后台参数封装
 */
interface showParam {
  page: number,
  limit: number,
  val: string
}

/**
 * modal参数声明部分
 */
const modalOptions = reactive<modalType>({
  addVisiable: false,
  modifyVisiable: false,
  data: null
});

/**
 * 声明 当前页面使用的常量
 */
const state = reactive({
  loading: false,
  tableData: [], // 数据列表
  pagination: {
    total: 0, // 总条数
    currentPage: 1, // 当前页
    pageSize: 10 // 分页大小
  }
})

/**
 * 数据表格显示时用到的后台参数封装,数据部分，用来给后台提供数据
 */
const param = {
  page: state.pagination.currentPage,
  limit: state.pagination.pageSize,
  val: ''
};

/**
 * 显示时用到的列信息
 */
const columns = [
  {title: 'ID', dataIndex: 'id', key: 'id', width: 60, fixed: 'left'},
  {title: '帐号', dataIndex: 'uaccount', key: 'uaccount', fixed: 'left', resizable: true},
  {title: '姓名', dataIndex: 'empName', key: 'empName', fixed: 'left', resizable: true},
  {title: '性别', dataIndex: 'empSex', key: 'empSex', fixed:'left'},
  {title: '编号', dataIndex: 'empCode', key: 'empCode', ellipsis: true},
  {title: '类型', dataIndex: 'empType', key: 'empType', ellipsis: true},
  {title: '职务', dataIndex: 'empJob', key: 'empJob', ellipsis: true},
  {title: '出生日期', dataIndex: 'empBirthday', key: 'empBirthday', ellipsis: true},
  {title: '班级名称', dataIndex: 'clazzName', key: 'clazzName', ellipsis: true, resizable: true},
  {title: '班级地址', dataIndex: 'clazzAddress', key: 'clazzAddress', ellipsis: true, resizable: true},
  {title: '班主任名称', dataIndex: 'clazzTeacherName', key: 'clazzTeacherName', ellipsis: true, resizable: true},
  {title: '班级类型', dataIndex: 'clazzType', key: 'clazzType', ellipsis: true},
  {title: '操作', dataIndex: 'action', key: 'action', fixed:'right', width: 180}
];
/*************************类型 常量部分************************/

/**
 * 声明一个工具类，用来规范化，页面业务方法
 * @author kangjx
 */
class dmlOperation {

  static initTable(param:showParam):void{
    //调用service层的方法进行处理
    console.log(111);
    UserService.userList(param).then((res: any) => {
      if (res.data.code === 200) {
        console.log(22222);
        state.tableData = res.data.data.records;
        state.pagination.currentPage = res.data.data.current;
        state.pagination.pageSize = res.data.data.size;
        state.pagination.total = res.data.data.total;
      }
    })
  }

  /**
   * 添加操作，弹出页面
   */
  static addUser(): void {
    console.log("添加 弹面窗体操作");
    modalOptions.addVisiable = true;
  };

  static addOk(): void {
    console.log("添加 保存操作");
    modalOptions.addVisiable = false;
  }

  static addCancel(): void {
    console.log("添加 取消操作");
  }
  /**
   * 修改页面
   */
  static modifyUser(t: string): void {
    console.log("修改 弹面窗体操作, 并传递参数到子组件");
    modalOptions.data = t;
    modalOptions.modifyVisiable = true;
  };

  static modifyOk(): void {
    console.log("添加 保存操作");
    modalOptions.addVisiable = false;
  }

  static modifyCancel(): void {
    console.log("添加 取消操作");
  }
  /**
   * 删除页面
   */
  static delUser(t: string): void {
    console.log("删除  弹面确认框操作");
    Modal.confirm({
      title: '删除功能',
      icon: createVNode(ExclamationCircleOutlined),
      content: createVNode('div', {style: 'color:red;'}, '您确认删除' + t + '数据吗?!'),
      onOk() {
        console.log('OK');
      },
      onCancel() {
        console.log('Cancel');
      },
      class: 'test',
    });
  }

}

/**
 * 挂载时的加载方法
 */
onMounted(() => {
  console.log(13213212313213)
  dmlOperation.initTable(param);
});

const onShowSizeChange = (current: number, pageSize: number) => {
  console.log(current, pageSize, 'ttt');
};
const handleTableChange = () => {
  console.log("分页")
  const param = {
    page: state.pagination.currentPage,
    limit: state.pagination.pageSize,
    val: ''
  };
  //调用service层的方法进行处理
  UserService.userList(param).then((res: any) => {
    if (res.data.code === 200) {
      console.log(res.data.data);
      state.tableData = res.data.data.records;
      state.pagination.currentPage = res.data.data.current;
      state.pagination.pageSize = res.data.data.size;
      state.pagination.total = res.data.data.total;
    }
  })
}


</script>

